<!-- 重点信息统计 -->
<script lang="ts" setup>
defineOptions({ name: "MajorHazardSources" });
import { whManagerBsTbDangerSourceStatisticByLevelUsingPost } from "@/genapi/wh";

const data = [
	{
		label: "一级",
		color: "#95F2D0",
		value: "15/47.5%",
	},
	{
		label: "二级",
		color: "#17EAFE",
		value: "15/47.5%",
	},
	{
		label: "三级",
		color: "#5EC9F9",
		value: "15/47.5%",
	},
	{
		label: "四级",
		color: "#93E6F7",
		value: "15/47.5%",
	},
];

const option = ref({
	color: [
		"#00ffff",
		"#00cfff",
		"#006ced",
		"#ffe000",
		"#ffa800",
		"#ff5b00",
		"#ff3000",
	],
	title: {
		text: "危险源等级占比",
		top: "10%",
		textAlign: "center",
		left: "30%",
		textStyle: {
			color: "#fff",
			fontSize: 14,
			fontWeight: "400",
		},
	},
	graphic: {
		elements: [
			{
				type: "image",
				z: 3,
				style: {
					width: 178,
					height: 178,
				},
				left: "center",
				top: "center",
				position: [100, 100],
			},
		],
	},
	tooltip: {
		show: false,
	},
	legend: {
		icon: "circle",
		orient: "horizontal",
		// x: 'left',
		data: ["一级", "二级", "三级", "四级"],
		right: 250,
		bottom: 100,
		align: "right",
		textStyle: {
			color: "#fff",
		},
		itemGap: 20,
	},
	toolbox: {
		show: false,
	},
	series: [
		{
			name: "",
			type: "pie",
			clockWise: false,
			radius: [55, 70],
			hoverAnimation: false,
			itemStyle: {
				normal: {
					labelLine: {
						show: false,
					},
				},
			},
			data: [],
		},
	],
});

const getRiskSourceLevelData = async () => {
	let { data } = await whManagerBsTbDangerSourceStatisticByLevelUsingPost({});
	option.value.series[0].data = [
		data.level1,
		data.level2,
		data.level3,
		data.level4,
	];
};

onMounted(() => {
	getRiskSourceLevelData();
});
</script>

<template>
	<div bg="#fff" flex="~ col" p="x-30px y-24px">
		<div text="#303133 20px" font="bold">重大危险源统计</div>
		<div
			h="64px"
			flex="~ justify-between items-center"
			p="l-20px r-30px"
			m="t-24px"
			bg="[linear-gradient( 180deg, #EFF7FF 0%, rgba(239,247,255,0.1) 100%)]"
			text="#2572CC"
			font="bold"
		>
			<span text="18px">重大危险源数量</span>
			<span text="22px">23</span>
		</div>
		<div flex="1 ~ items-center justify-center">
			<BaseEchart :option="option" />
		</div>
		<div grid="~ cols-2 gap-x-30px gap-y-20px">
			<div
				v-for="item in data"
				:key="item.label"
				h="40px"
				flex="~ items-center"
				b="#86B6C4/50 1px solid"
				rd="8px"
				p="x-15px"
				bg="#36D1F0/10"
				text="#3B445B"
				font="bold"
			>
				<span rd="4px" size="6px" :style="{ background: item.color }" />
				<span flex="1" p="x-14px">{{ item.label }}</span>
				<span>{{ item.value }}</span>
			</div>
		</div>
	</div>
</template>
